body
{
 	font-family : 'Open Sans', "Segoe UI", sans-serif;

}
input
{
 	font-family : 'Open Sans', "Segoe UI", sans-serif;
}
#principal
{

   height:600px;
   width:900px;
   margin: 0 auto;
   padding-right:30px;
}

.iconeTop
{
    position:relative; 
    margin-left:3px;
    top:-2px; 
}
.textTop{
    position:relative; 
    top:-6px;
    display:inline;
    color:white;
    font-size:0.7em;
    margin-bottom:5px;
}

#bar-player1, #bar-player-dist{
    height:20px;
}

.game{
   height:223px;
   margin:10px;
/*   background-image:url("images/background1.png");*/
   background-position: 0px 0px;
   background-repeat: repeat-x;
   border-width:1px;
   border-style:solid;
}
#player1
{
   background-color:red;
}

#player-dist
{
   background-color:silver;
}

#nbVies
{
	position:absolute;
	top:-5px;
	margin-left:25px;
}
#subragebar{
	display:inline;
	float : left;
	border:1px solid white;
	margin-top : 2px;
	position: absolute;
	height : 14px;
	width : 100px;
}

.ragebar{
	background-color : red;
	height : 14px;
	width : 100px;
	color:white;
	display:inline;
	font-size:12px;
	text-align:left;
	position: absolute;
	float:left;
        -webkit-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
   -moz-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -ms-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     -o-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
        transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */

-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}
.ragebar .text {
    margin-left: 2px;
    position: relative;
    top: -1px;
}

#subfuriousbar{
	float : left;
	display:inline;
	margin : 2px 0 0 105px;
	position: absolute;
	height : 14px;
	width : 100px;
	border:1px solid white;
}

.furiousbar{
	background-color : blue;
	float : left;
	display:inline;
	position: absolute;
	height : 14px;
	width : 0px;
	color:white;
	font-size:12px;
	text-align:left;
            -webkit-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
   -moz-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -ms-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     -o-transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
        transition: all 1300ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */

-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
   -moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -ms-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
     -o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}
.furiousbar .text {
    margin-left: 2px;
    position: relative;
    top: -1px;
}

#chat-box
{
	height:100px;
	width:900px;
	margin:0px;
}
#chat-view{
	height:100px;
	overflow:auto;
	margin:0px;
}

#envoyer{
	font-weight: bold;
	position: absolute;
	background: white; 
	border-radius: 5px;
	border-style: none;
	height:25px;
    text-align: right;
}

#envoyer:hover
{
	background-color: silver;
}
#envoyer:active
{
	background-color: grey;
}

#bulle
{
	top: 350px;
	left:20%;
	position: absolute;
}

#roue
{
    position: absolute;
   right: 0;
   top: 65px;
}